<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html class=" -webkit-">
	<head>		               
	<meta charset="utf-8">
    <title>杰利联合</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
	<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
    <meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
    <meta content="no-cache" http-equiv="pragma">
    <meta content="0" http-equiv="expires">
    <meta content="telephone=no, address=no" name="format-detection">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/jiu/css/mobile_module.css?v=1492672720" media="all">
    <script type="text/javascript" src="${ctxStatic}/jiu/js/jquery-2.0.3.min.js"></script>
	<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script type="text/javascript" src="${ctxStatic}/jiu/js/prefixfree.min.js?v=1492672720"></script>
	<script type="text/javascript" src="${ctxStatic}/jiu/js/m/dialog.js?v=1492672720"></script>
	<script type="text/javascript" src="${ctxStatic}/jiu/js/flipsnap.min.js?v=1492672720"></script>
    <link href="${ctxStatic}/jiu/css/common.css?v=1492672720" rel="stylesheet" type="text/css">
	<link href="${ctxStatic}/jiu/css/shop.css?v=1492672720" rel="stylesheet" type="text/css">
	</head>
<body class="withFoot">
    <div class="container">      	
        <div class="search_form">
            <a href="javascript:void(0);" class="cate_icon"> </a>
            <input type="text" placeholder="请输入产品名称" value="" name="search_key" id="search_key">
            <button type="button" id="search" onclick="searchCommodity()">搜索</button>
        </div> 
        
        <c:if test="${not empty className}">
	         <div class="list_type">
	          <a>${className}</a>
	         </div>  
        </c:if>
        
        <!-- 产品列表 -->
        <div class="product_list2">
            <ul id="productContainer">
          
                 <!-- <li class="contentItem" >
                        <a href="productListInfo.html">
                            <img src="http://jiujiu.hbweiyinqing.cn/Uploads/Picture/2016-07-19/578da1467dab3.jpg">
                            <div class="desc">
                            	<p class="name">50宽激光条幅布</p>
                            	<p class="price">3积分/米</p>
                            </div>
                        </a>
                </li> -->
            </ul>
        </div>
        <div class="noMore">没有更多内容</div> 
     	<div class="moreLoading"><em>&nbsp;</em>正在加载更多···</div>
              
    </div>	  
    <!-- 底部导航 -->
	<%@ include file="/WEB-INF/views/modules/jiuFront/footer.jsp"%>
    
<script type="text/javascript">

$(function() {

	$("#search_key").bind('keyup',function(event){
	    event=document.all?window.event:event;
	    if((event.keyCode || event.which)==13){
	    	searchCommodity();
	    }
	   });
})

function searchCommodity(){
	var name=$('#search_key').val();
	window.location.href="${ctxFront }/jiu/searchCommodity?uid=${uid}&name="+name;
}

//商品详情
function commodityDetails(id){
	window.location.href="${ctxFront }/jiu/commodityDetails?uid=${uid}&commodityId="+id+"&v="+Math.random();
}



 
//获取滚动条当前的位置 

function getScrollTop() { 

var scrollTop = 0; 

if (document.documentElement && document.documentElement.scrollTop) { 

scrollTop = document.documentElement.scrollTop; 

} 

else if (document.body) { 

scrollTop = document.body.scrollTop; 

} 

return scrollTop; 

} 



//获取当前可是范围的高度 

function getClientHeight() { 

var clientHeight = 0; 

if (document.body.clientHeight && document.documentElement.clientHeight) { 

clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); 

} 

else { 

clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); 

} 

return clientHeight; 

} 



//获取文档完整的高度 

function getScrollHeight() { 

return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 

} 



window.onscroll = function () {

	$("#tip").html("请等待正在加载中……");

if (getScrollTop() + getClientHeight() == getScrollHeight()) { 
	if(pageNo!='1'){
		pullupRefresh();
	}

	$("#tip").html("上拉加载更多");

}

} 

$(function(){
	pullupRefresh();
	
});


var pageNo = 1;


/**

 * 上拉加载具体业务实现

 */

 var ajaxFlag = 1;

function pullupRefresh() {
	
	/* $("#tip").html("正在加载中");

	if(ajaxFlag==0){

		return ;

	} */


	 $.get("${ctxFront}/jiu/ajaxCommodity?v="+Math.random(), {uid:"${uid}",pageNo: pageNo,pageSize:15,commodityClassId:"${commodityClassId}",name:"${name}"}, function(data){

		pageNo++;

		var list = data.result;
		 
		 var innerHTML= "";
		 
		 console.log(data);

		$.each(list, function(i, n){
			
			 innerHTML+='<li class="contentItem" >'+
					          '<a href="javascript:commodityDetails('+n.id+')">'+
					             '<img class="scrollLoading" src="${ctxUser }/jiu/'+n.ico+'">'+
					              '<div class="desc">'+
					              	'<p class="name">'+n.name+'</p>'+
					              	'<p class="price">'+n.price+'积分/'+n.unit+'</p>'+
					              '</div>'+
					         '</a>'+
					  	'</li>';
		 });
		 $("#productContainer").append(innerHTML);
	  }); 

}
</script>


</body>
</html>